<template>
  <div class="myorder">
    <div class="order-nav">
      <div class="list" v-bind:class="actnum==0 ? 'list-act' : ''" @click="getorderlist(),actnum = 0">
        <p>待付款</p>
        <div class="h"></div>
      </div>
      <div class="list" v-bind:class="actnum==3 ? 'list-act' : ''" @click="getdfhlist(),actnum = 3">
        <p>待发货</p>
        <div class="h"></div>
      </div>
      <div class="list" v-bind:class="actnum==1 ? 'list-act' : ''" @click="getpayorderlist(),actnum = 1">
        <p>待收货</p>
        <div class="h"></div>
      </div>
      <div class="list" v-bind:class="actnum==2 ? 'list-act' : ''" @click="getyshorderlist(),actnum = 2">
        <p>已收货</p>
        <div class="h"></div>
      </div>
    </div>
    <div class="order-box">
      <div class="item" v-for="(item,index) in order">
        <div class="item-head">
          <div class="left">
            <p class="p1">{{item.create_time}}</p>
            <p class="p2">订单号：{{item.order_number}}</p>
          </div>
          <div class="right">
            <p class="p-zt" v-if="item.status == 0">未支付</p>
            <p class="p-zt" v-if="item.status == 1 || item.status == 2">待发货</p>
            <p class="p-zt" v-if="item.status == 3">待收货</p>
            <p class="p-zt" v-if="item.status == 4">订单已完成</p>
          </div>
        </div>
        <div class="item-box">
          <div class="list" v-for="it in item.goods_item">
            <img :src="comimgsrc+it.preview" alt="">
            <div class="right">
              <div class="name">{{it.name}}</div>
              <div class="guige">规格：{{it.unit}}</div>
              <div class="r-down">
                <p class="p1">￥{{it.price}} <span> ×{{it.quantity}}</span></p>
                <div class="plbtn" v-if="it.content_type == 0 && item.status == 4" @click="gocomment(it.g_id,item.order_number)">去评论</div>
                <div class="plbtn" v-if="it.content_type == 1 && item.status == 4">已评论</div>
              </div>
            </div>
          </div>
        </div>  
        <div class="item-bottom">
          <p>总金额：{{item.total}}</p>
          <div class="btn gopay" v-if="item.status == 0" @click="subbutton(item.order_number,item.total+item.mail)">去付款</div>
          <div class="btn gopay" v-if="item.status == 3" @click="qrsh(item.order_number,index)">确认收货</div>
          <div class="btn" v-if="item.logistics != null && item.status == 3" @click="golook(item.order_number)">查看物流</div>
          <div class="btn" @click="del(index,item.order_number)">删除</div>
        </div>
      </div>
    </div>
    <div class="compage" v-if="actnum==0">
      <span @click="syy()"><p>上一页</p></span>
      <span :class="page == n ? 'active':''" v-for="n in last_page" @click="pageon(n)"><p>{{n}}</p></span>
      <span @click="xyy()"><p>下一页</p></span>
    </div>
    <div class="compage" v-if="actnum==3">
      <span @click="syy3()"><p>上一页</p></span>
      <span :class="page3 == n ? 'active':''" v-for="n in last_page" @click="pageon3(n)"><p>{{n}}</p></span>
      <span @click="xyy3()"><p>下一页</p></span>
    </div>
    <div class="compage" v-if="actnum==1">
      <span @click="syy1()"><p>上一页</p></span>
      <span :class="page1 == n ? 'active':''" v-for="n in last_page" @click="pageon1(n)"><p>{{n}}</p></span>
      <span @click="xyy1()"><p>下一页</p></span>
    </div>
    <div class="compage" v-if="actnum==2">
      <span @click="syy2()"><p>上一页</p></span>
      <span :class="page2 == n ? 'active':''" v-for="n in last_page" @click="pageon2(n)"><p>{{n}}</p></span>
      <span @click="xyy2()"><p>下一页</p></span>
    </div>
  </div>
</template>

<script>
import cp1 from '@/assets/image/cp1.jpg';
import qs from "qs"
export default {
  name: 'App',
  data(){
    return{
      cp1,
      actnum: 0,
      order:[],
      comimgsrc:'http://api.mountainfreshes.com',
      page: 1,
      page3: 1,
      page1: 1,
      page2: 1,
      last_page: 0
    }
  },
  methods:{
    pageon:function(n){
        this.page = n
        this.getorderlist()
      },
      syy:function(){
        if(this.page != 1){
          this.page = this.page -1;
          this.getorderlist()
        }
      },
      xyy:function(){
        if(this.page<this.last_page){
          this.page = this.page +1;
          this.getorderlist()
        }
      },
      pageon3:function(n){
        this.page3 = n
        this.getdfhlist()
      },
      syy3:function(){
        if(this.page != 1){
          this.page3 = this.page3 -1;
          this.getdfhlist()
        }
      },
      xyy3:function(){
        if(this.page<this.last_page){
          this.page3 = this.page3 +1;
          this.getdfhlist()
        }
      },
      pageon1:function(n){
        this.page1 = n
        this.getpayorderlist()
      },
      syy1:function(){
        if(this.page != 1){
          this.page1 = this.page1 -1;
          this.getpayorderlist()
        }
      },
      xyy1:function(){
        if(this.page<this.last_page){
          this.page1 = this.page1 +1;
          this.getpayorderlist()
        }
      },
      pageon2:function(n){
        this.page2 = n
        this.getyshorderlist()
      },
      syy2:function(){
        if(this.page != 1){
          this.page2 = this.page2 -1;
          this.getyshorderlist()
        }
      },
      xyy2:function(){
        if(this.page<this.last_page){
          this.page2 = this.page2 +1;
          this.getyshorderlist()
        }
      },
      golook:function(number){
        this.$router.push({ path: '/look',query:{order_num: number} })
      },
      del:function(i,num){
      this.$messagebox.confirm('确定要删除吗？','提示！',{confirmButtonText:'确定删除',cancelButtonText:'取消'}).then(() => {
          this.$http.post("/index.php/user/order/del",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  order_number: num

              }))
              .then(res => {
                console.log(res)
                this.order.splice(i,1);
                this.$toast({
                  message: '删除成功',
                  iconClass: 'icon iconfont icon-chenggong'
                });
              })
              .catch(error => {
                alert("网络错误")
              });
          
          
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });          
        });
    },
    getorderlist:function(){
        this.$http.post("/index.php/user/order/notpayorderlist",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid,
                  page: this.page
              }))
              .then(res => {
                this.order = res.data.row.data
                console.log(this.order)
                this.last_page = res.data.row.last_page
              })
              .catch(error => {
                alert("网络错误")
              });
    },
    getdfhlist:function(){
      this.$http.post("/index.php/user/order/waitOrderList",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid,
                  page: this.page3
              }))
              .then(res => {
                this.order = res.data.row.data
                console.log(this.order)
                this.last_page = res.data.row.last_page
              })
              .catch(error => {
                alert("网络错误")
              });
    },
    getpayorderlist:function(){
      this.$http.post("/index.php/user/order/receiptOrderList",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid,
                  page: this.page1
              }))
              .then(res => {
                this.order = res.data.row.data
                console.log(this.order)
                this.last_page = res.data.row.last_page
              })
              .catch(error => {
                alert("网络错误")
              });
    },
    getyshorderlist:function(){
      this.$http.post("/index.php/user/order/receiptOrder",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid,
                  page: this.page2
              }))
              .then(res => {
                this.order = res.data.row.data
                console.log(this.order)
                this.last_page = res.data.row.last_page
              })
              .catch(error => {
                alert("网络错误")
              });
    },
    qrsh:function(num,i){
      this.$http.post("/index.php/user/order/receipt",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  order_number: num
              }))
              .then(res => {
                if(res.data.code == 1){
                  this.$toast({
                    message: '已确认收货',
                    iconClass: 'icon iconfont icon-chenggong'
                  });
                  this.order.splice(i,1);
                }
              })
              .catch(error => {
                alert("网络错误")
              });
    },
    gocomment:function(i,ordernum){
      this.$router.push({ path: '/comment',query:{iid: i,ordernum: ordernum} })
    },
    subbutton:function(ordernum,zjg){
      this.$router.push({ path: '/buypage',query:{ddh: ordernum,ddjg: zjg} })
    }
  },
  components:{
    
  },
  created(){
    this.getorderlist();
  }
}
</script>

<style scoped lang="less">
.order-nav{
  padding: 0 .2rem;
  border-bottom: .02rem solid #dbdbdb;
  height: .8rem;
  border-top: .12rem solid #eceef3;
  .list{
    width: 25%;
    float: left;
    height: 100%;
    position: relative;
    p{
      font-size: .26rem;
      color: #333;
      line-height: .8rem;
    }
    .h{
      width: 1.18rem;
      height: .04rem;
      background: #54b84c;
      position: absolute;
      left: 50%;
      margin-left: -0.59rem;
      bottom: 0;
      display: none;
    }
  }
  .list-act{
    p{
      color: #54b84c;
    }
    .h{
      display: block;
    }
  }
}
.order-box{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
  background: #eceef3;
  .item{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    background: #fff;
    margin-top: .2rem;
    .item-head{
      padding: 0 .2rem;
      height: .8rem;
      border-top: 1px solid #cacaca;
      border-bottom: 1px solid #cacaca;
      .left{
        width: 4rem;
        height: 100%;
        float: left;
        text-align: left;
        .p1{
          font-size: .2rem;
          color: #666666;
          padding-top: .12rem;
        }
        .p2{
          font-size: .24rem;
          color: #333;
          padding-top: 0.04rem;
        }
      }
      .right{
        width: 1.4rem;
        height: 100%;
        float: right;
        line-height: .8rem;
        .p-zt{
          font-size: .24rem;
          color: #54b84c;
          text-align: right;
        } 
      }
    }
    .item-box{
      padding: .2rem;
      overflow: hidden;
      height: auto;
      zoom: 1;
      .list{
        width: 100%;
        height: 1.5rem;
        margin-bottom: .2rem;
        &:last-child{
          margin-bottom: 0;
        }
        img{
          display: block;
          float: left;
          width: 2rem;
          height: 1.5rem;
        }
        .right{
          width: 3.8rem;
          height: 100%;
          float: right;
          text-align: left;
          .name{
            width: 100%;
            height: .76rem;
            line-height: .38rem;
            font-size: .24rem;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          .guige{
            width: 100%;
            height: .32rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: .32rem;
            color: #333;
            font-size: .22rem;
            margin-top: .06rem;
          }
          .r-down{
            width: 100%;
            height: .36rem;
            margin-top: 0.04rem;
            .p1{
              float: left;
              line-height: .36rem;
              font-size: .28rem;
              color: #54b84c;
              span{
                font-size: .22rem;
                color: #666;
                padding-left: .2rem;
              }
            }
            .plbtn{
              width: 1.14rem;
              height: .36rem;
              float: right;
              box-sizing: border-box;
              border: 0.02rem solid #54b84c; 
              border-radius: 4px;
              line-height: .32rem;
              font-size: .22rem;
              color: #54b84c; 
              text-align: center;
            }
          }
        }
      }
    }
    .item-bottom{
      padding: 0 .2rem;
      height: .8rem;
      border-top: 1px solid #b5b5b5;
      border-bottom: 1px solid #b5b5b5;
      p{
        float: left;
        line-height: .8rem;
        font-size: .24rem;
        color: #59ba51;
      }
      .btn{
        width: 1.14rem;
        height: .5rem;
        margin-top: .15rem;
        margin-right: .1rem;
        box-sizing: border-box;
        border: .02rem solid #b5b5b5;
        color: #666;
        font-size: .22rem;
        line-height: .46rem;
        text-align: center;
        float: right;
        border-radius: 4px;
      }
      .gopay{
        margin-right: 0;
        border-color: #59ba51;
        color: #59ba51;
      }
    }
  }
}
</style>
